<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="88px" >
            <el-form-item :label="$t('执行小时')" prop="hour">
                <el-input v-model.number="formData.hour" :placeholder="$t('请输入')">
                </el-input>
            </el-form-item>
            <el-form-item :label="$t('执行分钟')" prop="minute">
                <el-input v-model.number="formData.minute" :placeholder="$t('请输入')">
                </el-input>
            </el-form-item>
            <el-form-item :label="$t('执行日')" prop="type">
                <el-select v-model="formData.type" :placeholder="$t('请选择')" @change="typeChange">
                    <el-option :label="$t('每日')" value="day"></el-option>
                    <el-option :label="$t('每周')" value="week"></el-option>
                    <el-option :label="$t('每月')" value="month"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('每周')" prop="week" v-if="formData.type=='week'">
                <l-select :options="weekOptions" v-model="formData.week" multiple :placeholder="$t('请选择')">
                </l-select>
            </el-form-item>
            <el-form-item :label="$t('每月')" prop="day" v-if="formData.type=='month'">
                <l-select :options="dayOptions" v-model="formData.day" multiple :placeholder="$t('请选择')">
                </l-select>
            </el-form-item>
            <el-form-item :label="$t('执行月')" prop="mounth" >
                <l-select :options="monthOptions" v-model="formData.mounth" multiple :placeholder="$t('请选择')">
                </l-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props:{
    },
    data(){
        return {
            formData:{
                hour:'',
                minute:'',
                type:'day',
                week:'',
                day:'',
                mounth:'',
            },
            rules: {
                hour: [
                    { required: true, message: this.$t('执行小时不能为空') },
                    { pattern: /^(2[0-3]|[0-1]?\d)$/, message: this.$t('请输入0-23的有效正整数')}
                ],
                minute: [
                    { required: true, message: this.$t('执行分钟不能为空') },
                    { pattern: /^(?:[1-5]?\d)$/, message: this.$t('请输入0-59的有效正整数')}
                ],
                week: [
                    { required: true, message: this.$t('每周不能为空'), trigger: 'change' }
                ],
                day: [
                    { required: true, message: this.$t('每月不能为空'), trigger: 'change' }
                ],
                mounth: [
                    { required: true, message: this.$t('每月不能为空'), trigger: 'change' }
                ],
            },
            weekOptions: [
                { value: "1", label: this.$t("周一") }, 
                { value: "2", label: this.$t("周二") }, 
                { value: "3", label: this.$t("周三") }, 
                { value: "4", label: this.$t("周四") },
                { value: "5", label: this.$t("周五") },
                { value: "6", label: this.$t("周六") }, 
                { value: "7", label: this.$t("周日") }],
            monthOptions: [
                { value: "1", label: this.$t("一月") }, 
                { value: "2", label: this.$t("二月") }, 
                { value: "3", label: this.$t("三月") }, 
                { value: "4", label: this.$t("四月") }, 
                { value: "5", label: this.$t("五月") }, 
                { value: "6", label: this.$t("六月") }, 
                { value: "7", label: this.$t("七月") },
                { value: "8", label: this.$t("八月") }, 
                { value: "9", label: this.$t("九月") },
                { value: "10", label: this.$t("十月") },
                { value: "11", label: this.$t("十一月") },
                { value: "12", label: this.$t("十二月") }
            ],
            dayOptions: [
                { value: "1", label: this.$t("1号") }, 
                { value: "2", label: this.$t("2号") }, 
                { value: "3", label: this.$t("3号") },
                { value: "4", label: this.$t("4号") },
                { value: "5", label: this.$t("5号") },
                { value: "6", label: this.$t("6号") },
                { value: "7", label: this.$t("7号") },
                { value: "8", label: this.$t("8号") },
                { value: "9", label: this.$t("9号") },
                { value: "10", label: this.$t("10号") },
                { value: "11", label: this.$t("11号") },
                { value: "12", label: this.$t("12号") },
                { value: "13", label: this.$t("13号") },
                { value: "14", label: this.$t("14号") },
                { value: "15", label: this.$t("15号") },
                { value: "16", label: this.$t("16号") },
                { value: "17", label: this.$t("17号") },
                { value: "18", label: this.$t("18号") },
                { value: "19", label: this.$t("19号") },
                { value: "20", label: this.$t("20号") },
                { value: "21", label: this.$t("21号") },
                { value: "22", label: this.$t("22号") },
                { value: "23", label: this.$t("23号") },
                { value: "24", label: this.$t("24号") },
                { value: "25", label: this.$t("25号") },
                { value: "26", label: this.$t("26号") },
                { value: "27", label: this.$t("27号") },
                { value: "28", label: this.$t("28号") },
                { value: "29", label: this.$t("29号") },
                { value: "30", label: this.$t("30号") },
                { value: "31", label: this.$t("31号") }],
 
        }
    },
    computed:{
    },
    created () {
    },
    methods:{
        typeChange(){
            this.formData.week = ''
            this.formData.day = ''
            this.$nextTick(() => {
                this.$refs.form.clearValidate()
            })
        },
        resetForm(){
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback()
                }
            });
        },
        setForm(data){
            this.formData = this.$deepClone(data)   
        },
        getForm(){
            const formData = this.$deepClone(this.formData)                      
            return formData
        }
    }
}
</script>